<!--
/**
* Author: linchun
* Date: 2022-08-24 13:04
* Desc: CouponItem 套票列表项
*/
-->
<template>
  <view class="coupon-item" :class="extClass">
    <view class="content flex-b-m">
      <view class="coupon-content flex-s-m">
        <view class="coupon-info-goods" @click.stop="showModal = true">
          <!-- <view class="type"> {{ item.name }} </view> -->
          <!-- 产品给方案写死命名 特惠券包 20220804 宏伟 -->
          <view>
            <view class="type"> 特惠券包 </view>
            <view v-if="item.mallType === '3'" class="look-goods"> <view class="goods">含卖品</view><view class="look fc-gray underline">点击查看</view> </view>
          </view>
          <view class="pics">
            <text class="num"> {{ item.couponNum }} </text>
            <text class="unit"> 张 </text>
          </view>
        </view>
        <view class="coupon-price">
          <text class="unit"> ￥ </text>
          <text class="num">
            {{ $utils.toFixed(item.saleTotalPrice) }}
          </text>
        </view>
      </view>
      <!-- 进步器 -->
      <view @click.stop="handleCheck">
        <u-icon class="icon" :size="20" v-if="!isChecked" color="#45C8F3" :name="'plus-circle-fill'"></u-icon>
      </view>
      <yy-stepper v-if="isChecked" :value="stepperNum" :min="getNumMin" :max="item.maxNum" @change="handleChange" />
    </view>
    <!-- 每个套票具体说明 -->
    <view class="tips flex-s-m" v-if="ablePackageCouponLen > 0">
      <view>
        <text class="mr10"> 本单可用{{ ablePackageCouponLen }}张 </text>
        <text class="mr10" v-if="diffPriceSum(item)"> | 补差￥{{ diffPriceSum(item) }} </text>
      </view>
      <text class="special" v-if="calcPackageDiscountPrice(item) && hasCommercePrice">
        <text class="fc-3 mr10"> | </text>
        <text class="fc-yellow"> 省￥{{ calcPackageDiscountPrice(item) }}</text>
      </text>
    </view>
    <!-- 详情弹窗 -->
    <coupon-popup
      v-if="showModal"
      :info="item"
      :show-modal="showModal"
      :num="ablePackageCouponLen"
      :discount-price="discountPrice"
      @confirm="handleCheck()"
      @cancel="showModal = false"
    ></coupon-popup>
  </view>
</template>
<script>
  import CouponPopup from '../CouponPopup'
  export default {
    name: 'CouponItem',
    components: { CouponPopup },
    props: {
      item: {
        type: Object,
        default: () => {
          return {}
        }
      },
      hasCommercePrice: Boolean,
      hasBorderTop: Boolean,
      chooseCounponNum: [String, Number], //
      ticketNum: [String, Number], //
      isChecked: Boolean,
      ablePackageCouponLen: [String, Number], // 套票可用张数
      discountPrice: [String, Number]
    },
    data() {
      return {
        curChooseNum: 1,
        showModal: false
      }
    },
    mounted() {
      this.init()
    },
    computed: {
      extClass() {
        return this.hasBorderTop ? 'dashedBorderTop' : ''
      },
      stepperNum() {
        let num = this.curChooseNum
        if (this.item.maxNum < this.item.minNum) {
          //限购
          num = this.item.maxNum
        } else {
          if (num < this.item.minNum) {
            num = this.item.minNum
          }
        }
        return num
      },
      getNumMin() {
        return this.item.minNum > this.item.maxNum ? this.$utils.isNaNStr(this.item.maxNum) : this.$utils.isNaNStr(this.item.minNum)
      }
    },
    watch: {
      curChooseNum: {
        handler() {
          this.init()
        },
        immediate: true
      }
    },
    methods: {
      init() {
        if (!+this.chooseCounponNum || (+this.chooseCounponNum && +this.chooseCounponNum > this.item.maxNum)) {
          this.curChooseNum = this.item.minNum
        } else {
          this.curChooseNum = +this.chooseCounponNum
        }
      },
      diffPriceSum(item) {
        //补差计算
        const num = this.$utils.isNaNStr(this.ablePackageCouponLen)
        const diffPrice = this.$utils.isNaNStr(item.diffPrice)
        const technicalServiceFee = this.$utils.isNaNStr(item.technicalServiceFee)
        const p = num * (diffPrice - technicalServiceFee)
        return this.$utils.toFixed(p)
      },
      // 计算券包立省金额
      calcPackageDiscountPrice(item = {}) {
        const siglePrice = this.$utils.isNaNStr(item.siglePrice) // 套票单张价格
        const singleSalePrice = this.$utils.isNaNStr(this.discountPrice) // 单个座位价格
        const p = (singleSalePrice - siglePrice) * this.ablePackageCouponLen
        return this.$utils.toFixed(p)
      },
      handleCheck() {
        const chooseItem = this.item
        if (!this.item.minNum) {
          this.curChooseNum = this.item.chooseNum ? this.item.chooseNum : 1
        } else {
          this.curChooseNum = this.item.chooseNum || 1
        }
        chooseItem.chooseNum = this.curChooseNum
        console.log('this.stepperNum+++++++', this.stepperNum)
        this.$emit('check', chooseItem, this.stepperNum)
      },
      handleChange(type, num) {
        const curNum = this.item.minNum > num ? this.item.minNum : num
        if (type === 'add') {
          this.curChooseNum = curNum + 1
        } else if (type === 'cut') {
          this.curChooseNum = curNum - 1
        }
        const chooseItem = this.item
        chooseItem.chooseNum = this.curChooseNum
        console.log('this.stepperNum______', this.stepperNum)
        this.$emit('check', chooseItem, this.stepperNum)
      }
    }
  }
</script>
<style lang="scss">
  .coupon-item {
    padding-top: 26rpx;
    background: #fff;
    &.dashedBorderTop {
      border-top: 1rpx dashed #e0e0e0;
    }
    .tips {
      height: 22rpx;
      line-height: 22rpx;
      padding: 0 0 34rpx 0;
      font-size: 22rpx;
      color: #333333;
      .special {
        font-size: 22rpx;
      }
    }
    .content {
      margin-bottom: 18rpx;
      .coupon-info-goods {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: auto;
        box-sizing: border-box;
        width: 288rpx;
        height: 100rpx;
        background: url(https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/bg-coupon-info-new.png) no-repeat;
        background-size: 100%;
        padding: 0 20rpx 0 22rpx;
        text-align: left;
        font-size: 28rpx;
        border-radius: 6rpx;
        .look-goods {
          display: flex;
          .look {
            font-size: 24rpx;
            zoom: 0.8;
            margin-bottom: 4rpx;
          }
          .goods {
            width: auto;
            font-weight: bold;
            color: #8249ff;
            font-size: 24rpx;
            zoom: 0.8;
          }
        }

        .type {
          font-weight: bold;
          color: #8249ff;
        }
        .pics {
          text-align: right;
          color: #ffffff;
          .num {
            font-size: 32rpx;
            font-weight: bold;
          }
          .unit {
            font-size: 24rpx;
          }
        }
      }
      .coupon-info {
        width: auto;
        max-width: 300rpx;
        height: 70rpx;
        background: url(https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/bg-coupon-info.png) no-repeat;
        background-size: 100%;
        padding: 0 0 0 22rpx;
        text-align: center;
        font-size: 28rpx;
        border-radius: 6rpx;
        .type {
          min-width: 157rpx;
          width: auto;
          font-weight: bold;
          color: #924920;
        }
        .pics {
          width: 91rpx;
          color: #ffffff;
          .num {
            font-size: 32rpx;
            font-weight: bold;
          }
          .unit {
            font-size: 24rpx;
          }
        }
      }
      .coupon-price {
        margin-left: 36rpx;
        color: #333333;
        font-weight: bold;
        .unit {
          font-size: 24rpx;
        }
        .num {
          font-size: 36rpx;
        }
      }
    }
  }
</style>
